<!DOCTYPE html>
<html lang="en" style="height:100%">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>问题申诉</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
    <link rel="stylesheet" type="text/css" href="../../css/vant.css" />
    <!-- <link rel="stylesheet" href="../../css/sqc.css"> -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{
            outline:none;
        }
        .active{
            font-size: 15px;
            font-weight: bold;
        }
        .add_pic img{
          width: 30%;
        }
    </style>
</head>

<body style="background: #fff;">
<div id="blank" class="header" v-cloak>
    <div v-back.tapmode class="back"></div>
    <span class="title">问题申诉</span>
</div>
<div id="app" style="padding-top: 55px;"  v-cloak>
   <div class="problem-appeal">
       <div class="change-order-li" style="margin-bottom: 12px">
           <div class="stats-head">
               <div>
                   <div class="stats-head-zi">{{hide_name_two(probleam_appeal_con.sellNickname)}}</div>
                   <div class="stats-head-name">{{hide_name(probleam_appeal_con.sellNickname)}}</div>
               </div>
               <div class="stats-order-time">{{probleam_appeal_con.createTime}}</div>
           </div>
           <div class="order-info">
               <div style="margin-bottom: 15px">单价&nbsp;<span style="color: #333">{{probleam_appeal_con.tradePrice}}CNY</span></div>
               <div style="margin-bottom: 15px">总价&nbsp;<span style="color: #333">{{probleam_appeal_con.totalPrice}}CNY</span></div>
               <div>已冻结&nbsp;<span style="color: #333">{{probleam_appeal_con.tradeNum}} QHR</span></div>
           </div>
           <div class="appeal-details">
               <div class="appeal-details-bottom" v-myclick="closezhis">查看详情</div>
           </div>
       </div>
   </div>
   <div class="appeal-reason">
       <div class="appeal-reason-one" @click="onSelect">
           <div style="float: left">申诉原因&nbsp;&nbsp;</div><span class="app-neirong">{{content}}</span>
           <div class="choise"  v-show="content == ''">
               请选择
               <img style="width: 5px;height: 10px;" v-src="'../../image/arrow_right_grey.png'" />
           </div>
       </div>
       <div class="appeal-reason-one">
           <div style="float: left;width: 25%;">申诉补充&nbsp;</div><input class="appeal-reason-one-ipt" type="text" v-modelo="supplement_content" placeholder="选填">
       </div>
       <div class="appeal-reason-one">
           <div style="float: left">上传图片</div>
       </div>
       <div class="add_pic" style="height: auto;border-bottom: 1px solid #f7f4f2;margin-bottom: 12px;">
           <div  class="upload-add" >
               <div class="upload-del"  v-for="(item, index) in filestr" :key="index" >
                 <img class="upload-img"  :src="item"  >
                 <span class="upload-del-span" v-myclick="[index,pictruedelete]">
 									<span class="upload-two" style="width: 1px; height: 9px;background-color:#fff;"></span>
                   <span class="upload-two" style="width: 9px; height: 1px;background-color:#fff;"></span>
 								</span>
               </div>
               <img v-myclick="show_pick" style="width: 29%;height:100px;display:inline-block;" v-show="filestr.length<3"  src="../../image/add_pricture.png">
           </div>
       </div>
       <div class="pic-bottom">
           <div>1、申诉的问题将在1-2个工作日内完成处理</div>
           <div>2、举报内容一点要保证真实，如若发现恶意虚假举报，系统将会进行精确锁定，予以封号处理</div>
       </div>
       <div class="sub-btn" :class="{'appeal_status' : probleam_appeal_con.appealStatus == 2}" v-myclick="[probleam_appeal_con.appealStatus,submission_appeal]">{{probleam_appeal_con.appealStatus == 1 ? '提交' : '我们已收到您的反馈，正在处理中' }}</div>
       <van-action-sheet v-model="show" title="申诉原因">
           <div class="menu-appeal">
               <p class="appeal-one" v-for="(list, index) in actions" :class="{active:index == addstatus}" v-myclick="[index, appealxuanze]">
                   {{list}}<img class="appeal-one-img" v-src="'../../image/dui_slices.png'" v-show="index == addstatus"/>
               </p>
               <div class="confirm-pay" v-myclick="addclick">确定</div>
           </div>
       </van-action-sheet>
   </div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript" src="../../script/vant.min.js"></script>

<script>
    var vm,
        probleam_appeal,
        probleam_appeal_con,
        sub_list,
        sub_con,
    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        })
        var details={
          agtVer:1,
          clientVer:1,
          ctime:201911071802959,
          cctime:201911071802959,
          sign:"abcdefg",
          token:getPrefs('token'),
          orderNo:api.pageParam.orderNo,
          orderType:api.pageParam.sellstatus,
        }
        var base = new Base64();
        var	item=base.encode(JSON.stringify(details))
        var data = {
            jsonData:item,
        };
        var callback=function(ret){
          var base = new Base64();
          var probleam_appeal = base.decode(ret.content.jsonData);
              probleam_appeal =JSON.parse( probleam_appeal);
              probleam_appeal_con = probleam_appeal.coOrder;
              console.log(JSON.stringify(probleam_appeal));
              initApp();
        }
        pinet.post(APIURLP+'/play/od/getFinishInfoData',data, callback);
        api.parseTapmode();

    };

    function initApp() {
        // var isBigImg = Vue.BSImg == 'big';
        vm = new Vue({
            el: '#app',
            data: {
                show: false,
                actions: ['我收到虚假的付款凭证，且未收到付款' , '我付了款，但是未及时或忘记点已支付'],
                content:'',
                addstatus:-1,
                title:'',
                probleam_appeal:probleam_appeal,
                probleam_appeal_con:probleam_appeal_con,
                supplement_content:'',
                sub_list:sub_list,
                sub_con:sub_con,
                filestr:[],
            },
            computed: {
            },
            methods: {
              closezhis:function(){
                closeWin();
              },
              pictruedelete:function(index) {
                this.filestr.splice(index,1);
              },
              show_pick:function(){
      					var selectPic = api.require('selectPic');
      					var param = {
      							maxNum : 3 //用户选择的最多图片张数
      					};
      					selectPic.showPics(param, function(ret, err) {
                  var selectlength = ret.data.length;
                  console.log(selectlength);
                  if(vm.filestr.length+selectlength>3){
                    api.toast({
                        msg: '最多只能上传三张',
                        duration: 2000,
                        location: 'middle'
                    });

                  }else{
                    showProgress();
                    for (var i = 0; i < ret.data.length; i++) {
                      vm.upload_qiniu(ret.data[i],i);
                    }
                  }

      							// vm.filestr.push(ret.data);
      					});
      				},
              upload_qiniu(file,index){
      					// console.log(file)
      							var obj = api.require('qiniuUpfile');
      							var savename = new Date().getTime() +index+ '.png';

      							obj.upfile({
      								file: file,
      								name: savename

      							}, function (ret, err) {
      								console.log(JSON.stringify(ret))
                      console.log(JSON.stringify(err))

      								if (ret.status) {

                        if (ret.oper == "complete") {

      										vm.filestr.push(qiniuhost + ret.info.key);
                          hideProgress();
                          console.log(vm.filestr)
                        }
      								}
      							});
      				},
              relode_roder:function(){
                var details={
                  agtVer:1,
                  clientVer:1,
                  ctime:201911071802959,
                  cctime:201911071802959,
                  sign:"abcdefg",
                  token:getPrefs('token'),
                  orderNo:api.pageParam.orderNo,
                }
                var base = new Base64();
                var	item=base.encode(JSON.stringify(details))
                var data = {
                    jsonData:item,
                };
                var callback=function(ret){
                  var base = new Base64();
                  var probleam_appeal = base.decode(ret.content.jsonData);
                      vm.probleam_appeal =JSON.parse( probleam_appeal);
                      vm.probleam_appeal_con = vm.probleam_appeal.coOrder;
                      console.log(JSON.stringify(vm.probleam_appeal));
                      initApp();
                }
                pinet.post(APIURLP+'/play/od/getReceivableInfoData',data, callback);
              },
              submission_appeal:function(value){
                if(value == 1){
                  var details={
                    agtVer:1,
                    clientVer:1,
                    ctime:201911071802959,
                    cctime:201911071802959,
                    sign:"abcdefg",
                    token:getPrefs('token'),
                    orderNo:this.probleam_appeal_con.orderNo,
                    appealDescribe:this.content,
                    appealReplenish:this.supplement_content,
                    pictureAds:this.filestr,
                  }
                  var base = new Base64();
                  var	item=base.encode(JSON.stringify(details))
                  var data = {
                      jsonData:item,
                  };
                  var callback=function(ret){
                    api.toast({
                        msg: '申诉成功',
                        duration: 2000,
                        location: 'middle'
                    });
                    window.location.reload();
                  }
                  pinet.post(APIURLP+'/play/al/addData',data, callback);
                }else {
                  return
                }
              },
              hide_name_two:function(name){
                return new Array(name.length).join('') + name.substr(-1);
              },
              hide_name:function(name){
                return new Array(name.length).join('*') + name.substr(-1);
              },
              onSelect(item) {
                  // 默认情况下，点击选项时不会自动关闭菜单
                  // 可以通过 close-on-click-action 属性开启自动关闭
                  this.show = true;
              },
              appealxuanze:function (index, event) {
                  this.addstatus = index;
                  this.title = this.actions[index];
              },
              addclick:function () {
                  this.show = false;
                  this.content = this.title;
              }
            },
            watch: {

            },
        })
    }

</script>

</html>
